import React, {useState} from 'react';
import { useMedia } from 'react-use';
import Logo from '../../assets/logo.svg';
import LogoSimple from '../../assets/logoSimple.svg';
import {useNavigate} from "react-router-dom";
import {Button} from "antd";

const NavbarDetail: React.FC = () => {
    const shortScreen = useMedia( '(max-width: 1000px)' );

    const logoSrc = shortScreen ? LogoSimple : Logo;

    const navigate = useNavigate();


    // 跳转到主页面
    const jumpHome = () => {
        navigate('/');
    };

    return (
        <header className="navbar">
            <div style={{position:"absolute", left:"15px"}}>
                <img className="logoIcon" src={logoSrc} alt="logo"></img>
            </div>

            <Button style={{position:"absolute", right:"35px"}}
                    onClick={jumpHome}>返回主页
            </Button>
        </header>
    );
};

export default NavbarDetail;